<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tesla</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:400,700&display=swap&subset=cyrillic"
    rel="stylesheet">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header class="header">
    <div class="container">
      <div class="header-top">
        <div class="logo">
          <a href="#">
            <img src="images/logo.png" alt="Tesla">
          </a>
        </div>
        <div class="header-btn">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="header-content">
        <h1 class="header-content__title">Roadster</h1>
        <div class="header-content__text">
          Самый быстрый автомобиль в мире, с рекордным ускорением, дальностью и производительностью.
        </div>
        <a class="button" href="#">
          Хочу тест драйв
        </a>
      </div>
    </div>
  </header>

  <nav class="menu">
    <div class="container container-menu">
      <div class="close-btn"></div>
      <div class="menu__list">
        <ul>
          <li><a href="#">Узнать цену</a></li>
          <li><a href="#">Характеристики</a></li>
          <li><a href="#">Тест Драйв</a></li>
          <li><a href="#">Новости</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="slider-top">
    <div class="slider">
      <div class="slider__item" style="background-image: url(images/slide-1.jpg)"></div>
      <div class="slider__item" style="background-image: url(images/slide-2.jpg)"></div>
      <div class="slider__item" style="background-image: url(images/slide-3.jpg)"></div>
    </div>
  </section>

  <section class="statistics">
    <div class="container">
      <div class="statistics-items">
        <div class="statistics-item">
          <div class="statistics-item__title">
            Двигатель
          </div>
          <div class="statistics-item__num">2,1<span>сек</span></div>
          <div class="statistics-item__descr">разгон до 100 км</div>
        </div>
        <div class="statistics-item">
          <div class="statistics-item__title">
            Батарея
          </div>
          <div class="statistics-item__num">1000<span>км</span></div>
          <div class="statistics-item__descr">запас хода</div>
        </div>
        <div class="statistics-item">
          <div class="statistics-item__title">
            Скорость
          </div>
          <div class="statistics-item__num statistics-item__num--speed">400<span>км/ч</span></div>
          <div class="statistics-item__descr">макс скорость</div>
        </div>
      </div>
    </div>
  </section>

  <section class="video">
    <div class="container">
      <iframe width="100%" height="400" src="https://www.youtube.com/embed/tw4jkyfY4HE" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </section>

  <section class="advantages">
    <div class="container">
      <div class="advantages-inner">
        <div class="advantages-inner__row">

          <div class="advantages-descr">
            <div class="advantages__title">Скорость</div>
            <div class="advantages__text">
              Самый быстроразгоняющийся серийный автомобиль из когда-либо созданных
            </div>
          </div>

          <div class="advantages__img">
            <img src="images/advantages-1.jpg" alt="slide1">
          </div>
        </div>

        <div class="advantages-inner__row advantages-inner__row--mobile">
          <div class="advantages__img">
            <img src="images/advantages-2.jpg" alt="slide1">
          </div>

          <div class="advantages-descr">
            <div class="advantages__text">
              <ul>
                <li>Датчик дождя</li>
                <li>Датчик света</li>
                <li>Автопилот</li>
                <li>Навигационная система</li>
                <li>Обогрев зеркал</li>
                <li>Усилитель руля</li>
                <li>Панорамная крыша</li>
                <li>Ксеноновые фары</li>
              </ul>
            </div>
            <div class="advantages__title advantages__title--bottom">Преимущества</div>
          </div>


        </div>
      </div>
    </div>
  </section>

  <section class="design">
    <div class="container">
      <div class="design__images">
        <img src="images/design.jpg" alt="дизайн">
      </div>
      <div class="design-row">
        <div class="design-row__item">
          <div class="design-row__item-num">01</div>
          <div class="design-row__item-text">
            Новый родстер был разработан бывшим дизайнером Mazda Францем фон Хольцхаузеном. Имеет съёмную стеклянную
            крышу и кузов с
            двумя передними сиденьями плюс два небольших сиденья сзади.
          </div>
        </div>
        <div class="design-row__item">
          <div class="design-row__item-num">02</div>
          <div class="design-row__item-text">
            Родстер имеет три электродвигателя, один спереди и два сзади, Они обеспечивают полный привод, а также
            систему адресного
            распределения крутящего момента для лучшего прохождения поворотов.
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="footer">
    <div class="container">
      <div class="footer-btn">
        <a href="#" class="button">
          Хочу тест драйв
        </a>
      </div>
      <div class="footer-copy">
        <ul>
          <li><a href="#">Tesla © 2020</a></li>
          <li><a href="#">Privacy & Legal</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Get Newsletter</a></li>
          <li><a href="#">Forums</a></li>
          <li><a href="#">Locations</a></li>
        </ul>
      </div>
    </div>
  </footer>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>
